<template>

  <div class="vacation">

    <section class="view">

      <!-- 年假 -->
      <div class="year-list">
         
        <div class="img">
          <img src="../../../static/imgs/year.svg">
        </div>
        <div class="year-detail">
          <h2>
            <span>年假</span><a @click.stop='showHelp("year")'>查看年假规则说明</a>
          </h2>
          <ul>
            <li v-if='hasNoYearLeave' class="noneData">无年假</li>
            <li v-for='(k,i) in yearData'  v-if='k.isShow' :key='i'>
              <p><span style="font-size:0.32rem;font-weight: 600;">{{k.years}}{{k.leave_type}}</span> <span>有效期{{k.end_dt | handleDisplayDate}}</span></p>
              <p><span>共{{k.sum_days}}天</span> <span>已休{{k.rest_days}}天</span><span>剩余{{k.surplus}}天</span></p>
              <mt-range
               v-model='yearRange[i]' 
               :barHeight='10' disabled
               :key='i'>
              </mt-range>
            </li>
          </ul>
        </div>
      </div>
      



      <!-- 病假 -->

      <div class="sick-list"  v-if='sickData.visible'>
         <div class="img">
          <img src="../../../static/imgs/sick.svg">
        </div>
        <div class="sick-detail">
          <h2>
            <span>病假</span><a @click.stop='showHelp("sick")'>查看病假规则说明</a>
          </h2>
          <ul>
            <li v-for='(k,i) in sickData' v-if='k.isShow' :key='i'>
              <p>               
                  <span v-if='k.leave_type ==="全薪病假"&& sickData.fullPaidSickLeaveAmountShow'>{{k.years}}{{k.leave_type}}</span> 
                  <span v-if='k.leave_type ==="有薪病假"&& sickData.paidSickLeaveAmountShow'>{{k.years}}{{k.leave_type}}</span>
                  <span v-if='k.leave_type ==="全薪病假" && sickData.fullPaidSickLeaveAmountShow'>有效期{{k.end_dt | handleDisplayDate}}</span> 
                  <span style='float:right;color:#26a2ff;' v-if='k.leave_type ==="有薪病假"&& sickData.fullPaidSickLeaveAmountShow'>剩余{{k.surplus}}天</span>
              </p>
              <p v-if='k.leave_type ==="全薪病假" && sickData.fullPaidSickLeaveAmountShow'><span >共{{k.sum_days}}天</span> <span>已休{{k.rest_days}}天</span><span>剩余{{k.surplus}}天</span></p>
              <mt-range
               v-if='k.leave_type ==="全薪病假"&& sickData.fullPaidSickLeaveAmountShow'
               v-model='yearRange[i]' 
               :barHeight='10' disabled
               :key='i'>
              </mt-range>
            </li>
          </ul>
        </div>
        
        
      </div>  
  
    </section>

   


  <div class="nav-area">
       <div @click="alterLeave('leave')" :class="{selected:selectedMe}">我的休假</div>
       <div @click="alterLeave('dept')" :class="{selected:!selectedMe}">本部门休假情况</div>
  </div>


    <!-- 请假详情 -->
   <section class="detail" v-if="selectedMe">
      <ul>

        <li v-for='i in startDataList' @click="targetToRecord(i)">
  
          <h3 class="detail-title" style="line-height: 0.36rem;">
              <span>{{i.wfBusinessProcessData.processTypeName}}</span>&nbsp;&nbsp;<span style="margin:auto 0.06rem;">共{{i.wfBusinessProcessData.leaveDay}}天</span>
             <p>{{i.wfBusinessProcessData.startTime | handleDisplayDate}}&nbsp;{{i.wfBusinessProcessData.startTimeHalfDaySign | ampm}} - {{i.wfBusinessProcessData.endTime | handleDisplayDate}}&nbsp;{{i.wfBusinessProcessData.endTimeHalfDaySign | ampm}}</p>
              <span v-if="handleStatus(i.status) === '已备案'" style="float:right;background-color:#58CF28;color:#fff;display:inline-block;border-radius:0.1rem;height: 0.4rem;line-height: 0.4rem;font-size:0.24rem;width:0.96rem;text-align:center;margin-left:0.06rem;">已通过</span>
              <span v-if="handleStatus(i.status) ==='审批中'" style="float:right;background-color:#258DE4;color:#fff;display:inline-block;border-radius:0.1rem;height: 0.4rem;line-height: 0.4rem;font-size:0.24rem;width:0.96rem;text-align:center;margin-left:0.06rem;">待审批</span>
              <span v-if="handleStatus(i.status) ==='已拒绝'" style="float:right;background-color:#D12C23;color:#fff;display:inline-block;border-radius:0.1rem;height: 0.4rem;line-height: 0.4rem;font-size:0.24rem;width:0.96rem;text-align:center;margin-left:0.06rem;">已拒绝</span>
              <span v-if="handleStatus(i.status) ==='已撤销'" style="float:right;background-color:#D12C23;color:#fff;display:inline-block;border-radius:0.1rem;height: 0.4rem;line-height: 0.4rem;font-size:0.24rem;width:0.96rem;text-align:center;margin-left:0.06rem;">已撤销</span>
          </h3>
  
          <p class="detail-content">
              {{i.wfBusinessProcessData.leaveReason}}
          </p>
  
        </li>
  
      </ul>
      <div class="nav-loadMore" :class="{'leaveMoreBtn':isShowLeaveBtn}">
            <div v-if="!myleaveEnd" @click="loadMore('leave')" class="selected"><span>更多</span></div>
            <div v-else >暂无更多数据</div>
      </div>
    </section>

    <!-- 本部门详情 -->
   <section class="detail" v-else>
        <!-- <div class="leader-info" v-for="(info,index) in dataDeptList"  :key="info.id">
            <div class="pic">
            <img :src="handleImg(info)" alt="" />
            </div>
            <div class="info-container">	
            <div class="basic-info">
                <span >{{info.name}}</span>
                <span class='position'>{{info.position}}</span>
                <span>{{info.leaveName}}</span>
                <span class="approStat" :class="hasClass(info.auditStatus)">{{info.auditStatus == '1' ? '审批中' : '已备案'}}</span>
            </div>
            <div class="posi-info">
                <span class="days">共{{info.leaveDay}}天</span>
                <span class="time">{{info.startTime}} {{info.leaveStSection === '1' ? '上午' : '下午'}} - {{info.endTime}} {{info.leaveEndSection === '1' ? '上午' : '下午'}}</span>
            </div>
            </div>
        </div> -->

        <ul>

          <li v-for='i in dataDeptList' >
    
            <h3 class="detail-title">
                <span style="min-width:1rem;display: inline-block;">{{i.emplname}}</span>
                <span style="margin:auto 0.12rem;">共 {{i.effeLeaveDay}} 天</span>
                <p style="float:right;margin-right:0.2rem;">{{i.effeStartTime | handleDisplayDate}} {{i.effeStartTimeHalfDaySign === 1 ? '上午' : '下午'}} - {{i.effeEndTime | handleDisplayDate}} {{i.effeEndTimeHalfDaySign === 1 ? '上午' : '下午'}}</p>
            </h3>
    
          </li>
    
        </ul>
        <div  v-bind:class="{'leaveMoreBtn':isShowLeaveBtn,'nav-loadMore':true}">
            <div v-if="!deptLeaveEnd" @click="loadMore('dept')" class="selected"><span>更多</span></div>
            <div v-else >暂无更多数据</div>
        </div>
    </section>





  
    <section class='apply' v-if="isShowLeaveBtn">
  
      <span @click="targetToLeave">我要休假</span>
  
    </section>
  
  </div>
</template>

<script>
import Vue from 'vue';

import { Range, MessageBox } from 'mint-ui';

Vue.component(Range.name, Range);

export default {

  data () {

    return {

      yearPopupVisible: false,
      active: 1,

      yearRange: [],

      sickRange: 0,

      show: true,

      res: '',

      height: '',

      sickData: [],

      yearData: [],

      startDataList: [],
      yearLeaveList: [],
      sickLeaveList: [],
      sickDetail: {
        comment: ''
      },

      yearDetail: {
        comment: ''
      },

      selectedMe: true,
      dataDeptList: [],

      myLeavePageNum: 1,
      deptLeavePageNum: 1,
      pageSize: 8,

      myleaveEnd: false,
      deptLeaveEnd: false,
      isShowLeaveBtn: true,

      hasNoYearLeave:false,
    };
  },

  filters: {
      ampm: function(value) {
          if (value == '1') {
              return '上午';
          } else if (value == '2') {
              return '下午';
          }
      },
      handleDisplayDate:function(val){
          if (val) {
              if (typeof val === 'string' && val.split(' ').length>1) {
                  var splitArr = val.split(' ')[0].split('-');
                  return val.split(' ')[0].replace(/\-/g, '.');
              }
              var dataObj = new Date(val);
              var year = dataObj.getFullYear();
              var month = dataObj.getMonth() + 1;
              month = month > 9 ? month : '0' + month;
              var day = dataObj.getDate();
              day = day > 9 ? day : '0' + day;
              return year + "." + month + "." + day 
          } else {
              return ''
          }
      },
      handleTitle: function(val){
          return val == '1' ? '请' : (val == '3' ? '销' : '请')
      },
      handleStatus: function(status){
          return status == 1 ? '已备案' : (status == 2 ? '审批中' : (status == 3 ? '已撤销' : '已拒绝'));
      }
  },

  mounted () {

    if (window.location.origin != 'http://202.104.142.49:8089'  && window.location.hostname != 'localhost' && location.search ) {
      var token = location.search.split("=")[1];
      localStorage.setItem('token', token);

      this.Axios.Post(this.URL.webLogin.url, {}).then(res => {

        if (res.data.status === 1) {
          this.isShowLeaveBtn = res.data.datas.applyLeavePlatform;
          this.getStartSend();
          this.sendAjax();
          this.getVacationDetail()
        }
      })
    } else {
      this.getStartSend();
      this.sendAjax();
      this.getVacationDetail()
    }
  },
  methods: {

    handleStatus: function(status){
        return status == 1 ? '已备案' : (status == 2 ? '审批中' : (status == 3 ? '已撤销' : '已拒绝'));

    },

    hasClass: function (val) {
      if (val == '1') {
        return 'shenpi'
      } else {
        return 'beian'
      }
    },

    handleImg: function (info) {
      return this.Axios.baseURI + this.URL.tabGetEmployeeImg.url + '?emplid=' + info.emplid + '&sex=' + (info.sex_descr === '女' ? 2 : 1) + '&token=' + localStorage.getItem('token');
    },

    loadMore: function (type) {
      this.resetPageNum(type, 'add');
      this.initListData(type);
    },

    alterLeave: function (type) {
      if (type === 'leave') {
        this.selectedMe = true;
      } else {
        this.selectedMe = false;
      }
    },


    showHelp (a) {
      const type = a == "year" ? "年假" : "病假"

      if (type === '年假') {
        MessageBox.alert(this.yearDetail.comment, type);
      } else {
        MessageBox.alert(this.sickDetail.comment, type);
      }
    },

    getVacationDetail () {
      this.Axios.Post('/leaveType/findList').then(res => {

        const { datas } = res.data

        datas.forEach((ele, i) => {
          if (ele.name === '年假') {
            this.yearDetail.comment = ele.content
          }

          if (ele.name === '病假') {
            this.sickDetail.comment = ele.content
          }
        })
      })
    },
    sendAjax () {
      this.getDeptLeaveData();

      this.Axios.Post('/businessVacation/findYearVacationData').then((res) => {

        const { datas } = res.data

        let yearData = [], sickData = []

        // 去年
        yearData.push({
          end_dt: datas.lastFailureTime,
          sum_days: datas.lastTotalAmount,
          rest_days: datas.lastUsedAmount,  //已休
          surplus: datas.lastSurplusAmount,  //剩余
          leave_type: '年假',
          years: datas.lastYear,
          isShow:parseInt(datas.status) && parseInt(datas.lastTotalAmount || 0)
        })

        yearData.push({
          end_dt: datas.thisFailureTime,
          sum_days: datas.thisTotalAmount,
          rest_days: datas.thisUsedAmount,
          surplus: datas.thisSurplusAmount,
          leave_type: '年假',
          years: datas.thisYear,
          isShow:parseInt(datas.thisTotalAmount || 0)
        })

        if (!datas.thisTotalAmount && !datas.lastTotalAmount) {
            this.hasNoYearLeave = true;
        }

        sickData.push({
          end_dt: datas.fullPaidSickLeaveAmountFailureTime,
          sum_days: datas.fullPaidSickLeaveAmountTotal,
          surplus: datas.fullPaidSickLeaveAmountSurplus,
          rest_days: datas.fullPaidSickLeaveAmountUsed,
          leave_type: '全薪病假',
          isShow:parseInt(datas.fullPaidSickLeaveAmountTotal || 0)
        })

        sickData.push({
          sum_days: parseFloat(datas.paidSickLeaveAmount) > 0 ? 1 : 0,
          surplus: datas.paidSickLeaveAmount,
          leave_type: '有薪病假',
          isShow:parseInt(datas.paidSickLeaveAmount || 0)
        })


        this.yearData = yearData

        this.sickData = sickData
        this.sickData.visible = 0
        if(1!=datas.userType){
            if(datas.paidSickLeaveAmountShow||datas.fullPaidSickLeaveAmountShow){
              this.sickData.visible = 1
              this.sickData.paidSickLeaveAmountShow = datas.paidSickLeaveAmountShow
              this.sickData.fullPaidSickLeaveAmountShow = datas.fullPaidSickLeaveAmountShow
            }
        }


        // this.sickData.visible = datas.paidSickLeaveAmount || datas.fullPaidSickLeaveAmountTotal

        this.yearData.forEach((element, i, arr) => {
          this.yearRange.push(100 - arr[i].surplus / arr[i].sum_days * 100);
        });

        this.sickData.forEach((element, i, arr) => {
          if (arr[i].leave_type == '全薪病假') {
            this.sickRange = 100 - arr[i].surplus / arr[i].sum_days * 100;
          }
        });
      })
    },

    getDeptLeaveData: function () {

      let params = {
        pageSize: this.pageSize,
        pageNum: this.deptLeavePageNum
      };
      this.Axios.Post(this.URL.tabQueryList.url, params).then(res => {
        res.data && (this.dataDeptList = this.dataDeptList.concat(res.data.datas || []));
        var total = res.data.total;
        if (total == 0 || total == this.dataDeptList.length) {
          this.deptLeaveEnd = true;
        }
      })

    },



    targetToLeave () {
      location.href =
        '/module/leave.html?token=' + sessionStorage.getItem('token');
    },
    targetToRecord: function (itemData) {

      localStorage.setItem('St_BsId', itemData.id);
      // localStorage.setItem('detail_AI',itemData.applyId || itemData.busi_id);
      location.href = '/module/myStart.html';
    },

    getStartSend: function () {
      let params = {
        pageSize: this.pageSize,
        pageNum: this.myLeavePageNum
      };
      this.Axios.Post(this.URL.myleaveByrecord.url, params).then(res => {

        res.data && (this.startDataList = this.startDataList.concat(res.data.datas || []));
        var total = res.data.total;
        if (total == 0 || total == this.startDataList.length) {
          this.myleaveEnd = true;
        }
      });
    },


    resetPageNum: function (newVal, add) {
      switch (newVal) {
        case 'leave':
          !add ? this.myLeavePageNum = 1 : this.myLeavePageNum++;
          break;
        case 'dept':
          !add ? this.deptLeavePageNum = 1 : this.deptLeavePageNum++;
          break;
      }
    },

    isLoadEnd: function (newVal) {
      switch (newVal) {
        case 'leave':
          return this.myleaveEnd;
          break;
        default:
          return this.deptLeaveEnd;
          break;

      }
    },
    initListData: function (newVal) {

      switch (newVal) {
        case 'leave':
          this.getStartSend();
          break;
        default:
          this.getDeptLeaveData();
          break;
      }
    }


  }

};
</script>

<style lang='less'>
.vacation {
  width: 100%;

  .noneData{
      line-height: 0.8rem;
  }
  .view {
    background-color: #f3f3f3;
    width: 100%;

    .sick-list {
      margin-top: 6/50rem;
    }

    .year-list,
    .sick-list {
      padding: 15rem/50;
      overflow: hidden;
      width: 100%;
      background-color: #fff;

      .img {
        width: 60rem/50;
        height: 60rem/50;
        margin-right: 12rem/50;
        float: left;
        img {
          display: block;
          width: 100%;
          height: 100%;
        }
      }

      .year-detail,
      .sick-detail {
        float: left;
        width: 75%;
        & > h2 {
          span {
            letter-spacing: 1.5rem/50;
            color: rgb(0, 0, 0);
            font-size: 16rem/50;
          }
          a {
            margin-left: 12/50rem;
            cursor: pointer;
            color: rgb(37, 141, 228);
            font-weight: normal;
            letter-spacing: 0.8rem/50;
            font-size: 13/50rem;
          }
        }

        & > ul {
          width: 100%;
          & > li {
            width: 100%;
            & > p:nth-of-type(1) {
              margin-top: 12/50rem;
              span {
                letter-spacing: 1rem/50;
              }
              span:nth-of-type(1) {
                font-size: 16/50rem;
                color: rgb(0, 0, 0);
              }

              span:nth-of-type(2) {
                color: #d22b27;
                margin-left: 6/50rem;
              }
            }

            & > p:nth-of-type(2) {
              margin-top: 6/50rem;
              overflow: hidden;
              span {
                float: left;
                letter-spacing: 1rem/50;
              }

              span:nth-of-type(2) {
                margin-left: 12rem/50;
              }

              span:last-of-type {
                float: right;
                color: #26a2ff;
              }
            }
          }
        }

        .mt-range {
          .mt-range-progress {
            border-radius: 30px 0 0 30px !important;

            background-color: #e4e4e4 !important;
          }

          .mt-range-runway {
            border-radius: 30px !important;

            right: -12px;

            border-top-color: #26a2ff;
          }

          .mt-range-thumb {
            width: 12px !important;

            height: 12px !important;

            top: 9px;

            margin-left: -2px;

            border: 1px solid #26a2ff;
          }
        }

        .mt-range-content {
          margin-right: 10px !important;
        }

        .mt-range--disabled {
          opacity: 1;
        }
      }
    }
  }

  .nav-area {
    display: flex;
    line-height: 1rem;
    height: 1rem;
    align-items: center;
    background-color: #fff;
    margin-top: 0.2rem;
    > div {
      display: inline-flex;
      width: 50%;
      justify-content: center;
    }
    > div:nth-child(2) {
      border-left: 0.02rem solid #f3f3f3;
    }
    > div.selected {
      color: #26a2ff;
      span {
        letter-spacing: 0.06rem;
      }
    }
  }

  .nav-loadMore {
    display: flex;
    line-height: 1rem;
    height: 1rem;
    align-items: center;
    background-color: #fff;
    margin-top: 0.2rem;

    > div {
      display: inline-flex;
      width: 100%;
      justify-content: center;
    }
    > div.selected {
      color: #26a2ff;
      span {
        letter-spacing: 0.06rem;
      }
    }
  }

  .leaveMoreBtn {
    margin-bottom: 74/50rem;
  }

  .leader-info .info-container .basic-info > h2 {
    display: inline-block;
    font-size: 0.36rem;
    line-height: 0.44rem;
    height: 0.44rem;
  }

  .leader-info .info-container .basic-info .sex {
    color: #888;
  }
  .leader-info .info-container .basic-info {
    margin-top: 0.02rem;
    padding-right: 1rem;
    position: relative;
  }
  .leader-info .info-container .basic-info {
    margin-top: 0.02rem;
    span.position {
      color: #aaa9a9;
      font-size: 0.26rem;
    }
    span.approStat {
      color: #fff;
      display: inline-block;
      border-radius: 0.1rem;
      height: 0.28rem;
      line-height: 0.28rem;
      font-size: 0.24rem;
      width: 0.96rem;
      position: absolute;
      right: -0.04rem;
      top: 0.06rem;
      text-align: center;
    }
    span.beian {
      background-color: #58cf28;
    }
    span.shenpi {
      background-color: #258de4;
    }
  }
  .leader-info .info-container .posi-info {
    font-size: 0.32rem;
    height: 0.42rem;
    line-height: 0.42rem;
    span.days {
      font-size: 0.28rem;
      color: #258de4;
    }
    span.time {
      color: #aaa9a9;
      font-size: 0.26rem;
      float: right;
    }
  }
  .leader-info .ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .leader-info {
    padding-left: 0.3rem;
    padding-top: 0.14rem;
    border-bottom: 1px solid #eee;
    background-color: rgba(255, 255, 254, 0.95);
    padding-bottom: 0.14rem;
    margin: 0.2rem auto;
  }
  .leader-info > div {
    display: inline-block;
  }
  .leader-info .info-container {
    padding-left: 0.1rem;
    max-width: 6rem;
    width: calc(100% - 1rem);
    line-height: 0.46rem;
  }

  .leader-info .pic {
    vertical-align: top;
    width: 0.92rem;
    height: 0.92rem;
  }
  .leader-info .pic img {
    width: 0.92rem;
    height: 0.92rem;
    border-radius: 50%;
    border: 0.02rem solid #dcdbdc;
  }

  .detail {
    margin-top: 10/50rem;

    padding-bottom: 10rem/50;

    li {
      margin-top: 10/50rem;

      background-color: #fff;
    }

    .detail-title {
      padding: 8rem/50;
      padding: 8rem/50 5rem/50 8rem/50 8rem/50;

      font-weight: normal;

      overflow: hidden;

      p {
        display: inline-block;

        color: grey;

        font-size: 12px;

        margin-top: 2/50rem;
      }

      span:first-of-type {
        position: relative;

        margin-left: 16/50rem;

        &::before {
          content: '';

          width: 6/50rem;

          height: 6/50rem;

          border-radius: 50%;

          background-color: #26a2ff;

          position: absolute;

          left: -14/50rem;

          top: 50%;

          margin-top: -3/50rem;
        }
      }

      span:last-of-type {
        margin-left: 15/50rem;
      }
    }

    .detail-content {
      border-top: #f4f4f4 solid 1px;
      word-break: break-word;
      padding: 14rem/50 0 14rem/50 12rem/50;
    }
  }

  .apply {
    position: fixed;

    bottom: 0;

    left: 0;

    background: #fff;

    width: 100%;

    padding: 12/50rem 0;

    span {
      display: block;

      -webkit-tap-highlight-color: transparent;
      width: 200/50rem;

      font-size: 16px;

      margin: 0 auto;

      padding: 10rem/50 0;

      border-radius: 28rem/50;

      text-align: center;

      background-color: #007ee7;

      color: #fff;

      cursor: pointer;
    }
  }
}
</style>
